<template>
  <el-dialog
      title="子表单配置"
      :visible.sync="visible"
      append-to-body
      width="50%"
      :close-on-click-modal="false"
  >
    <el-form style="height: 300px; overflow-y: auto;">
      <el-form-item label="表格按钮">
        <el-table :data="tableBtn" border>
          <el-table-column label="名称" prop="text" />
          <el-table-column label="隐藏/显示" align="center">
            <template slot-scope="{ row }">
              <el-switch v-model="row.show"/>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="表格列">
        <el-table :data="columns" border>
          <el-table-column label="列名" prop="label" />
          <el-table-column label="列值" prop="name" />
          <el-table-column label="类型">
            <template slot-scope="{ row }">
              <span v-if="row.type && row.type === 'index'">索引列</span>
              <span v-else-if="row.type && row.type === 'selection'">选择列</span>
              <span v-else>普通列</span>
            </template>
          </el-table-column>
          <el-table-column label="隐藏/显示" align="center">
            <template slot-scope="{ row }">
              <el-switch v-model="row.show"/>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="表格操作列按钮">
        <el-table :data="operates" border>
          <el-table-column label="名称" prop="text" />
          <el-table-column label="隐藏/显示" align="center">
            <template slot-scope="{ row }">
              <el-switch v-model="row.show"/>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button type="primary" @click="visible = false">确 认</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: "TableConf",

  data() {
    return {
      visible: false,
      config: {},
      columns: [],
      operates: [],
      tableBtn: []
    }
  },

  methods: {
    showTableEdit(config) {
      if (config) {
        this.config = config
        // 表格按钮
        this.tableBtn = config.tableBtn
        // 列
        this.columns = config.column
        // 操作列按钮
        this.operates = config.operate
        this.visible = true
      }
    }
  }
}
</script>

<style scoped>

</style>
